<template>
  <div>
    <h3 style="text-align: center;">修改密码</h3>
    <div class="formStyle">
      <el-form
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="请输入旧密码">
          <el-input v-model="oldPwd" style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="请输入新密码">
          <el-input v-model="newPwd" style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="请确认新密码">
          <el-input v-model="againPwd" style="width: 200px;"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updatePwd()">
            修改
          </el-button>
          <el-button type="primary" @click="resetForm" style="margin-left: 50px">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import {ElMessage} from 'element-plus'
import axios from "axios";

export default {
  data() {
    return {
      newPwd: "",
      oldPwd: "",
      againPwd: ""
    }
  },methods:{
    updatePwd() {
      let loginUser = JSON.parse(sessionStorage.getItem("loginUser"));
      if (loginUser.pwd != this.oldPwd) {
        ElMessage.error('原密码输入错误')
      } else if (this.newPwd == '' || this.newPwd !== this.againPwd) {
        ElMessage.error('修改密码输入有误')
      } else {
        axios.get("/project/user/updatePwd", {
          params: {newPwd: this.newPwd}
        }).then(resp => {
          if (resp.data == "ok") {
            alert("密码修改成功")
            this.$router.push("/login")
          }
        })
      }
    },
    resetForm() {
      this.newPwd = "";
      this.oldPwd = "";
      this.againPwd = "";
    }
  }
}
</script>

<style scoped>
.formStyle{
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
</style>